<template>
  <div class="indexForm">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-form-item label="规则状态">
        <br />
        <el-input v-model="form.status" disabled></el-input>
      </el-form-item>
      <el-form-item label="预警阀值" prop="valve">
        <el-row v-if="active != 5">
          <el-col :span="3"> 概率满足</el-col>
          <el-col :span="16">
            <el-input
              v-model.number="form.valve"
              @input="form.valve = inputChange(form.valve)"
            >
              <template slot="append">%</template>
            </el-input>
          </el-col>
          <el-col :span="5">以上需要预警 </el-col>
        </el-row>
        <el-row v-else>
          <el-col :span="24">
            用水量满足
            <el-select v-model="form.water" clearable filterable>
              <el-option
                v-for="item in options_time"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input v-model.number="form.valve">
              <template slot="append">%</template>
            </el-input>
            吨以上需要预警
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="预警等级" prop="level">
        <el-switch
          v-model="form.level"
          :active-value="true"
          :inactive-value="false"
          @change="switchChange"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="" size="normal" v-if="form.level">
        <Level :items="levels" :initVal="form.valve"></Level>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{
          form.status == '已激活' ? '应用' : '激活'
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Level from '@/views/components/Level'
import { findByModelId } from '@/api/rule'
import { submitApi } from './submit'

export default {
  name: 'indexForm',
  props: {
    active: {
      type: String,
      default: ''
    }
    // data: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  components: {
    Level
  },
  data() {
    return {
      form: {
        status: '',
        valve: '',
        level: false
      },
      levels: [{ name: '', min: '', max: '', imageUrl: '' }],
      rules: {
        valve: [{ required: true, message: '请输入阀值', trigger: 'change' }],
        level: [{ required: true, message: '请选择等级', trigger: 'change' }]
      },
      options_time: [
        { label: '一个月', value: 1 },
        { label: '一个季度', value: 2 },
        { label: '特定时段', value: 3 }
      ],
      user: {},
      poltype: '',
      data: {}
    }
  },
  created() {
    this.user = this.$store.state.user.user
    this.poltype = this.user.poltype
    this.levels = [{ name: '', min: this.form.valve, max: '', imageUrl: '' }]
    this.findByModelId()
  },
  watch: {
    active() {
      this.findByModelId()
    }
    // data: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     this.form.status = val.ruleStatus == 1 ? '已激活' : '待激活'
    //     if (this.active != 5) {
    //       this.form.valve = val.warningRuleThresholdList[0]?.warningThreshold
    //     }
    //   }
    // }
  },
  methods: {
    onSubmit() {
      submitApi.call(this)
    },
    inputChange(val) {
      if (typeof val == 'number') {
        if (val > 100) {
          return 100
        } else {
          return Math.abs(val)
        }
      }
    },
    switchChange() {
      this.levels = [{ name: '', min: this.form.valve, max: '', imageUrl: '' }]
    },
    findByModelId() {
      let modelId = this.active || localStorage.modelType
      findByModelId({ modelId }).then((res) => {
        if (!res.success) return
        let { data } = res
        this.data = data
        this.form.status = data.ruleStatus == 1 ? '已激活' : '待激活'
        this.form.valve = data.warningRuleThresholdList[0]?.warningThreshold
        let levelList = data.warningRuleThresholdList[0]?.warningRuleLevelList
        this.levels = []
        if (levelList?.length) {
          this.form.level = true
          levelList.map((i) => {
            this.levels.push({
              name: i.levelName,
              min: i.beginInterval,
              max: i.endInterval,
              imageUrl: i.fileUrl
            })
          })
        } else {
          this.form.level = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.indexForm {
  ::v-deep .el-form {
    .el-form-item__label {
      width: 100% !important;
      text-align: left;
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>